<template>
  <view class="list">
    <view class="area" v-for="item in list" :key="item">
      <view class="left">
        <view class="top">{{ item.meeting }}</view>
        <view class="bottom">{{ item.time }}</view>
      </view>
      <view class="right">
        <image :src="judgeImage(item.status)" />
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "list",
  data() {
    return {
      list: [
        {
          meeting: "二月第1次全体廉洁分享会",
          time: "2022-02-22 22:22",
          status: "待审批",
        },
        {
          meeting: "二月第1次全体廉洁分享会",
          time: "2022-02-22 22:22",
          status: "已审批",
        },
        {
          meeting: "二月第1次全体廉洁分享会",
          time: "2022-02-22 22:22",
          status: "已拒绝",
        },
      ],
    };
  },
  computed: {},
  methods: {
    judgeImage(status) {
      console.log(status);
      let res = "";
      switch (status) {
        case "待审批":
          res = "/static/image/list/wait-approval.png";
          break;
        case "已审批":
          res = "/static/image/list/end-approval.png";
          break;
        case "已拒绝":
          res = "/static/image/list/refuse-approval.png";
          break;
        default:
          break;
      }
      return res;
    },
  },
};
</script>

<style lang="scss" scoped>
.list {
  width: 100%;
  .area {
    display: flex;
    padding: 20rpx 50rpx;
    box-sizing: border-box;
    border: 1rpx solid red;
    justify-content: space-between;
    align-items: center;
    .left {
      .top {
        margin-bottom: 30rpx;
      }
      .bottom {
      }
    }
    .right {
      width: 78rpx;
      height: 78rpx;
      image {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>